<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" type="text/css" href="dist/w2ui.css" />
    <script type="text/javascript" src="libs/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="dist/w2ui.js"></script>
    <script type="text/javascript" src="cus/field.js"></script>
    <script type="text/javascript" src="cus/grid.js"></script>
</head>
<body>

    <div id="form" style="width: 750px;">
        <div class="w2ui-page page-0">
            <div class="w2ui-field">
                <label>First Name:</label>
                <div>
                    <input name="first_name" type="text" maxlength="100" size="60"/>
                </div>
            </div>
            <div class="w2ui-field">
                <label>Last Name:</label>
                <div>
                    <input name="last_name" type="text" maxlength="100" size="60"/>
                </div>
            </div>
            <div class="w2ui-field">
                <label>Text Area:</label>
                <div>
                    <textarea name="comments" type="text" style="width: 385px; height: 80px; resize: none"></textarea>
                </div>
            </div>
        </div>

        <div class="w2ui-buttons">
            <button class="btn" name="reset">Reset</button>
            <button class="btn" name="save">Save</button>
        </div>
    </div>

    <script type="text/javascript">

    $(function () {
        var nodes = [{
            id: '000',
            text: '未来公司',
            img: 'icon-folder',
            nodes: [{
                id: 1,
                text: 'Google',
                img: 'icon-page'
            }, {
                id: 2,
                text: 'Baidu',
                img: 'icon-page'
            }, {
                id: 3,
                text: 'Microsoft',
                img: 'icon-page'
            }]
        }];
        $('#form').w2form({ 
            name  : 'form',
            fields: [
                { name: 'first_name', type: 'etree', required: true },
                { name: 'last_name',  type: 'text', required: true },
                { name: 'comments',   type: 'text'}
            ],
            actions: {
                reset: function () {
                    this.clear();
                },
                save: function () {
                    console.dir(this.record);
                    //this.save();
                }
            }
        });
        w2ui['form'].record['first_name'] = '3';
        w2ui['form'].set('first_name',{options: {selected: '3', nodes:nodes}});
    });
</script>

<div id="grid" style="width: 100%; height: 400px;"></div>
<button id="btn">GetChanges</button>
</body>
</html>